<%@ page language="java" import="java.util.*" contentType="text/html;charset=UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String basePath = request.getContextPath();
%>
<html>
<head>
<title>single</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="My Play Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script src="js/jquery-3.3.1.min.js"></script>
<script type="application/x-javascript">
	addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
</script>
<script src="js/share.js" type="text/javascript"></script>
<script src="js/otherSingle.js" type="text/javascript"></script>
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<script src="js/comment.js" type="text/javascript"></script>
<!-- bootstrap -->
<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' media="all" />
<!-- //bootstrap -->
<link href="css/dashboard.css" rel="stylesheet">
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' media="all" />
<link href="css/subStyle.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
<!--start-smoth-scrolling-->
<!-- fonts -->
<link href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<!-- //fonts -->
<script>
function timeStampToString(time){
	var datetime = new Date();
	datetime.setTime(time);
	var year = datetime.getFullYear();
	var month = datetime.getMonth()+1<10?"0"+(datetime.getMonth()+1):datetime.getMonth()+1;
	var date = datetime.getDate()<10?"0"+datetime.getDate():datetime.getDate();
	// 这个hour比数据库里的时间多8个小时
	// 是时区的问题，要改一下数据库的设置
	// 前面获取评论时间那里也要改一下
	var hour = datetime.getHours()<10?"0"+datetime.getHours():datetime.getHours();
	var minute = datetime.getMinutes<10?"0"+datetime.getMinutes():datetime.getMinutes();
	var second = datetime.getSeconds()<10?"0"+datetime.getSeconds():datetime.getSeconds();
	return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
}

function load(){
	var commentCount=0;  // 评论总条数
	var commentVideoID = document.getElementById("testid").innerHTML; //当前视频ID
	
	$.ajax({
	    type:'post',
	    url:'resultByVideoID',
	    dataType:'json',
	    data:{"commentVideoID":commentVideoID},
	    success:function (comments) {
	    commentCount = comments.length;
	    //alert(commentCount);
	    pageShow(1,Math.ceil(commentCount/5));
	    },
	    error:function(){
	    	alert("get comments failure");
	    }
	})
}

/*
//评论翻页
pageShow(1,11);
//dbPage     当前页
//totalPages 总页数
/*总页数 = 总评论数/5 */
function pageShow(dbPage,totalPages)
{
    $(function()
    {
        //page分割数量
        var pageFor = 5;
        var pageSlipt = parseInt(pageFor / 2);
        var pageHTML = new Array;
        if (dbPage > 1) //如果当前页大于1，则显示上一页
        {
            var dbPagePre = dbPage-1;
            pageHTML += "<a href=\"javascript:pageShow('"+ (dbPagePre) +"','"+totalPages+"');\"><上一页</a>";
        }

        if (totalPages > pageFor)    //如果总页数大于分割页数
        {
            if(dbPage <= pageSlipt+1)
            {
                for (i=1;i<=pageFor;i++)
                {
                    if (i == dbPage)
                    {
                        pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\" class=\"this\">" +i+ "</a>";
                    }
                    else
                    {
                        pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\">" +i+ "</a>";
                    }
                }
            }
            else if (dbPage > totalPages-pageSlipt)
            {
                for (i=totalPages-pageFor+1; i<=totalPages; i++)
                {
                    if (i == dbPage)
                    {
                        pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\" class=\"this\">" +i+ "</a>";
                    }
                    else
                    {
                        pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\">" +i+ "</a>";
                    }
                }
            }
            else
            {
                for (i=dbPage-pageSlipt; i<=parseInt(dbPage)+parseInt(pageSlipt); i++)
                {
                    if (i == dbPage)
                    {
                        pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\" class=\"this\">" +i+ "</a>";
                    }
                    else
                    {
                        pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\">" +i+ "</a>";
                    }
                }
            }
        }
        else
        {
            for (i=1; i<=totalPages; i++)
            {
                if (i == dbPage)
                {
                    pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\" class=\"this\">" +i+ "</a>";
                }
                else
                {
                    pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\">" +i+ "</a>";
                }
            }
        }

        if (parseInt(dbPage)<parseInt(totalPages))   //如果当前页小于总页数，则显示下一页
        {
            var dbPageNext = parseInt(dbPage)+1;
            pageHTML += "<a href=\"javascript:pageShow('"+ dbPageNext +"','"+totalPages+"');\">下一页></a>";
        }

        $(".pages").html(pageHTML);
    });
}
</script>
</head>
  <body onload="load()">

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html"><h1><img src="images/logo.png" alt="" /></h1></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
			<div class="top-search">
				<form class="navbar-form navbar-right">
					<input type="text" class="form-control" placeholder="Search...">
					<input type="submit" value=" ">
				</form>
			</div>  
			<div class="header-top-right">
				<!--  Object obj = session.getAttribute("user");> -->
					<% if (session.getAttribute("user") != null) {%>				  
    						  <div class="header-right">
    							<li class="dropdown">
    									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
    		                            <img src="${sessionScope.user.header}" style="width:50px;height:50px;border-radius:50px">
    		                                <span class="username" id="userName"><font size="+1">您好，${sessionScope.user.name}</font></span>
    		                                <span id="userID" style="display:none">${sessionScope.user.userID }</span>
    									<strong class="caret"></strong>
    									</a>
    									<ul class="dropdown-menu">
    										<li><a href="#"><i class="icon-user"></i> 个人主页</a></li>
    										<li><a href="#"><i class="icon-tasks"></i> 修改个人信息</a></li>
    										<li><a href="#"><i class="icon-calendar"></i>个人视频</a></li>
    										<li class="divider"></li>
    										<li><a href="logout"><i class="icon-key"></i>注销</a></li>
    									</ul>
    								</li>
    							</div>
								<% } else { %>
   							   	<div class="signin">
					<a href="#small-dialog3" class="play-icon popup-with-zoom-anim">注册</a>
					<span id="userID" style="display:none"></span>
					<!-- pop-up-box -->
									<script type="text/javascript" src="js/modernizr.custom.min.js"></script>    
									<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
									<link href="css/checkCode.css" rel="stylesheet" type="text/css" media="all"/>
									<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
									<script src="js/signValidation.js" type="text/javascript"></script>
						<!--			<script src="js/checkCode.js" type="text/javascript"></script>-->
									<!--//pop-up-box -->
									<div id="small-dialog3" class="mfp-hide">
										<h3>创建账户</h3>
										<div class="social-sits">
											<div class="facebook-button">
												<a href="#">QQ账号登录</a>
											</div>
											<div class="chrome-button">
												<a href="#">微信账号登录</a>
											</div>
											<div class="button-bottom">
												<p>已经有账号？ <a href="#small-dialog" class="play-icon popup-with-zoom-anim">登录</a></p>
											</div>
										</div>
										<div class="signup">
										<script type="text/javascript" src="js/md5.js"></script>
												<script language="javascript">
												    function SubmitForm() {
												    
												        document.getElementById("pwd").value = hex_md5(document.getElementById("pwd").value);
												        //document.form1.submit
												    }
												</script>
										
											<form name="form1" method="post" action="register">
												<input type="text" class="email" id="name-vali" name="name" placeholder="昵称" required="required" title="输入昵称"/>
												<p id="nickname.info" style="color:red"></p>
												<input type="text" class="email" style="width: 60%;" id="txt-code" maxlength="6" placeholder="验证码" required="required" title="输入验证码"/>
												<p id="txt-code.info" style="color:red"></p>
												<canvas width="30%" style=" float: right;" id="codeCanvas" onclick="createCode()">对不起，当前浏览器不支持此验证码</canvas>
												<input type="text" class="email" id="email-vali"placeholder="Email" name="email" required="required" title="输入有效的邮箱地址"/>
												<p id="email-vali.info" style="color:red"></p>
												<input type="text" class="email" style="width:60%;float: left;" id="email-code" placeholder="邮箱验证" required="required" title="输入邮箱验证码"/>

												<!--<input type="button" value="发送验证码"/>-->
												<button type="button" style="float: right;width: 30%;height: 42px;">发送验证码</button>
												<input type="password" id="pwd" name="pwd" placeholder="密码" required="required" title="至少6位，必须包括大小写字符、数字" autocomplete="off" />
												<p id="pwd.info" style="color:red"></p>
												<input type="password" id="pwd-vali" placeholder="确认密码" required="required" title="再次输入以确认密码" autocomplete="off"/>
												<p id="pwd-vali.info" style="color:red"></p>
												<input type="submit" class="signup-vali" value="注册" onclick="SubmitForm()"/>
											</form>
										</div>
										<div class="clearfix"> </div>
									</div>	
									<div id="small-dialog7" class="mfp-hide">
										<h3>创建账户</h3>
										<div class="social-sits">
											<div class="facebook-button">
												<a href="#">QQ账号登录</a>
											</div>
											<div class="chrome-button">
												<a href="#">微信账号登录</a>
											</div>
											<div class="button-bottom">
												<p>已经有账号？ <a href="#small-dialog" class="play-icon popup-with-zoom-anim">登录</a></p>
											</div>
										</div>
										<div class="signup">
											<form action="upload.html">
												<input type="text" name="email-login1" class="email" id="email-login1" placeholder="Email" required="required" title="输入有效的邮箱地址"/>
												<p id="email-login1.info" style="color:red"></p>
												<input type="password" name="pwd-login1" id="pwd-login1" placeholder="密码" required="required" title="至少6个字符" autocomplete="off" />
												<p id="pwd-login1.info" style="color:red"></p>
												<input type="submit"  value="Sign In"/>
											</form>
										</div>
										<div class="clearfix"> </div>
									</div>			
									<div id="small-dialog4" class="mfp-hide">
										<h3>Feedback</h3> 
										<div class="feedback-grids">
											<div class="feedback-grid">
												<p>Suspendisse tristique magna ut urna pellentesque, ut egestas velit faucibus. Nullam mattis lectus ullamcorper dui dignissim, sit amet egestas orci ullamcorper.</p>
											</div>
											<div class="button-bottom">
												<p><a href="#small-dialog" class="play-icon popup-with-zoom-anim">Sign in</a> to get started.</p>
											</div>
										</div>
									</div>
									<div id="small-dialog5" class="mfp-hide">
										<h3>Help</h3> 
											<div class="help-grid">
												<p>Suspendisse tristique magna ut urna pellentesque, ut egestas velit faucibus. Nullam mattis lectus ullamcorper dui dignissim, sit amet egestas orci ullamcorper.</p>
											</div>
											<div class="help-grids">
												<div class="help-button-bottom">
													<p><a href="#small-dialog4" class="play-icon popup-with-zoom-anim">Feedback</a></p>
												</div>
												<div class="help-button-bottom">
													<p><a href="#small-dialog6" class="play-icon popup-with-zoom-anim">Lorem ipsum dolor sit amet</a></p>
												</div>
												<div class="help-button-bottom">
													<p><a href="#small-dialog6" class="play-icon popup-with-zoom-anim">Nunc vitae rutrum enim</a></p>
												</div>
												<div class="help-button-bottom">
													<p><a href="#small-dialog6" class="play-icon popup-with-zoom-anim">Mauris at volutpat leo</a></p>
												</div>
												<div class="help-button-bottom">
													<p><a href="#small-dialog6" class="play-icon popup-with-zoom-anim">Mauris vehicula rutrum velit</a></p>
												</div>
												<div class="help-button-bottom">
													<p><a href="#small-dialog6" class="play-icon popup-with-zoom-anim">Aliquam eget ante non orci fac</a></p>
												</div>
											</div>
									</div>
									<div id="small-dialog6" class="mfp-hide">
										<div class="video-information-text">
											<h4>Video information & settings</h4>
											<p>Suspendisse tristique magna ut urna pellentesque, ut egestas velit faucibus. Nullam mattis lectus ullamcorper dui dignissim, sit amet egestas orci ullamcorper.</p>
											<ol>
												<li>Nunc vitae rutrum enim. Mauris at volutpat leo. Vivamus dapibus mi ut elit fermentum tincidunt.</li>
												<li>Nunc vitae rutrum enim. Mauris at volutpat leo. Vivamus dapibus mi ut elit fermentum tincidunt.</li>
												<li>Nunc vitae rutrum enim. Mauris at volutpat leo. Vivamus dapibus mi ut elit fermentum tincidunt.</li>
												<li>Nunc vitae rutrum enim. Mauris at volutpat leo. Vivamus dapibus mi ut elit fermentum tincidunt.</li>
												<li>Nunc vitae rutrum enim. Mauris at volutpat leo. Vivamus dapibus mi ut elit fermentum tincidunt.</li>
											</ol>
										</div>
									</div>
									<script>
											$(document).ready(function() {
											$('.popup-with-zoom-anim').magnificPopup({
												type: 'inline',
												fixedContentPos: false,
												fixedBgPos: true,
												overflowY: 'auto',
												closeBtnInside: true,
												preloader: false,
												midClick: true,
												removalDelay: 300,
												mainClass: 'my-mfp-zoom-in'
											});
																											
											});
									</script>	
				</div>
				<div class="signin">
					<a href="#small-dialog" class="play-icon popup-with-zoom-anim">登录</a>
					<div id="small-dialog" class="mfp-hide">
						<h3>登录</h3>
						<div class="social-sits">
							<div class="facebook-button">
								<a href="#">QQ账号登录</a>
							</div>
							<div class="chrome-button">
								<a href="#">微信账号登录</a>
							</div>
							<div class="button-bottom">
								<p>还没有账号？ <a href="#small-dialog3" class="play-icon popup-with-zoom-anim">注册</a></p>
							</div>
						</div>
						<div class="signup">
							<script type="text/javascript" src="js/md5.js"></script>
												<script language="javascript">
												    function submitForm() {
												    
												        document.getElementById("pwd-login2").value = hex_md5(document.getElementById("pwd-login2").value);
												        //document.form1.submit
												    }
												</script>
							<form action="doLogin" method="get">
								<input type="text" class="email" id="account-login" name="name"  placeholder="邮箱/手机" required="required" />
								<p id="account-login.info" style="color:red"></p>
								<input type="password" id="pwd-login2" name="pwd" placeholder="密码" required="required" autocomplete="off" />
								<p id="pwd-login2.info" style="color:red"></p>
								<input type="submit" id="login2" value="登录" onclick="submitForm()"/>
							</form>
							<div class="forgot">
								<a href="#">忘记密码？</a>
							</div>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
									<% } %>
				<div class="clearfix"> </div>
			</div>
        </div>
		<div class="clearfix"> </div>
      </div>
    </nav>
        <div class="col-sm-3 col-md-2 sidebar">
			<div class="top-navigation">
				<div class="t-menu">MENU</div>
				<div class="t-img">
					<img src="images/lines.png" alt="" />
				</div>
				<div class="clearfix"> </div>
			</div>
				<div class="drop-navigation drop-navigation">
				  <ul class="nav nav-sidebar">
					<li class="active"><a href="loginuser" class="home-icon"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>首页</a></li>
					
					<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电影" class="menu1"><span class="glyphicon glyphicon-film" aria-hidden="true"></span>电影<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a></li>
						<ul class="cl-effect-2">
							<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电影#">浪漫</a></li>                                             
							<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电影#scare">惊悚</a></li>
							<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电影#lunli">伦理</a></li> 
						</ul>
						<!-- script-for-menu -->
						<script>
							$( "li a.menu1" ).click(function() {
							$( "ul.cl-effect-2" ).slideToggle( 300, function() {
							// Animation complete.
							});
							});
						</script>
					<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电视剧" class="menu"><span class="glyphicon glyphicon-film glyphicon-king" aria-hidden="true"></span>电视剧<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a></li>
						<ul class="cl-effect-1">
							<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电视剧#">校园</a></li>                                             
							<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电视剧#old">古装</a></li>
							<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电视剧#family">家庭</a></li> 
						</ul>
						<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=生活" class="user-icon"><span class="glyphicon glyphicon-home glyphicon-blackboard" aria-hidden="true"></span>生活</a></li>
					<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=新闻" class="sub-icon"><span class="glyphicon glyphicon-home glyphicon-hourglass" aria-hidden="true"></span>新闻</a></li>
						<!-- script-for-menu -->
						<script>
							$( "li a.menu" ).click(function() {
							$( "ul.cl-effect-1" ).slideToggle( 300, function() {
							// Animation complete.
							});
							});
						</script>
					<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=综艺" class="song-icon"><span class="glyphicon glyphicon-music" aria-hidden="true"></span>综艺</a></li>
				  </ul>
				  <!-- script-for-menu -->
						<script>
							$( ".top-navigation" ).click(function() {
							$( ".drop-navigation" ).slideToggle( 300, function() {
							// Animation complete.
							});
							});
						</script>
					<div class="side-bottom">
						<!--<div class="side-bottom-icons">
							<ul class="nav2">
								<li><a href="#" class="facebook"> </a></li>
								<li><a href="#" class="facebook twitter"> </a></li>
								<li><a href="#" class="facebook chrome"> </a></li>
								<li><a href="#" class="facebook dribbble"> </a></li>
							</ul>
						</div>-->
						<div class="copyright">
							<p>Copyright &copy; 2018.Team3 All rights reserved.Podcast <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">大学生播客</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">Team3</a></p>
						</div>
					</div>
				</div>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<div class="show-top-grids">
				<div class="col-sm-8 single-left">
					<div class="song">
						<div class="song-info">
							<h3 id="videoName">${requestScope.video.title}</h3>
					</div>
						<div class="video-grid">
							<div id="video" style="width: 600px; height: 400px;"></div>
							<script type="text/javascript" src="ckplayer/ckplayer.js"></script>
							<script type="text/javascript">
								var videoObject = {
									container: '#video', //容器的ID或className
									variable: 'player',
									debug:true,//开启调试模式
									flashplayer: false, //是否需要强制使用flashplayer
									video: '/${requestScope.video.filePath}'
								};
								var player = new ckplayer(videoObject);
							</script>
						</div>
					</div>
					<div class="song-grid-right">
						<div class="share">
							<h5>分享</h5>
							<ul>
								<li><a href="javascript:;" id="qzone" onclick="qzone()" class="icon qzone-icon" title="分享到QQ空间">QQ空间</a></li>
								<li><a href="javascript:;" id="qq_id" onclick="qqFriend()" class="icon qq-icon" title="分享给QQ好友">QQ好友</a></li>
								<li><a href="javascript:;" id="txweibo" onclick="txweibo()" class="icon txweibo-icon" title="分享到腾讯微博">腾讯微博</a></li>
								<li><a href="javascript:
                                       void((function(s,d,e,r,l,p,t,z,c){
                                       var%20f='http://v.t.sina.com.cn/share/share.php?appkey=真实的appkey',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');
                                       function%20a(){
                                       if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');
                                       };
                                       if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();
                                       })(screen,document,encodeURIComponent,'','','','冯雪宁的码云','https://gitee.com/Cindy18SE','页面编码gb2312|utf-8默认gb2312'));" id="sina" onclick="sina()" class="icon xinlang-icon" title="分享到新浪微博">新浪微博</a></li>
								<li><a href="#" class="icon tieba-icon" id="tieba" onclick="tieba()" title="分享到百度贴吧">百度贴吧</a></li>
								<li><a href="#" class="icon like" id="like" onclick="likeVideo()">${requestScope.video.recommentCount}</a></li>
								<li>
                                    <a href="#" id="add_favourite" class="favourite-icon" title="收藏视频" onclick="addFavourite()">收藏</a>
                                </li>
								<li class="view">${requestScope.video.clickCount}</li>
							</ul>
						</div>
					</div>
					<div class="clearfix"> </div>
					<div class="published">
                        <!--what for??-->
							<script>
								$(document).ready(function () {
									size_li = $("#myList li").size();
									x=1;
									$('#myList li:lt('+x+')').show();
									$('#loadMore').click(function () {
										x= (x+1 <= size_li) ? x+1 : size_li;
										$('#myList li:lt('+x+')').show();
									});
									$('#showLess').click(function () {
										x=(x-1<0) ? 1 : x-1;
										$('#myList li').not(':lt('+x+')').hide();
									});
								});
							</script>
							<div id="intro">
								<ul>
									<li style="list-style-type:none;">
										<h4>简介</h4>
										<p>${requestScope.video.description}</p>
									</li>
									<li style="list-style-type:none;">
										<div class="load-grids">
											<div class="load-grid">
												<p>类型</p>
											</div>
											<div class="load-grid">
												<a href="movies.html">${requestScope.categoryName}</a>
											</div>
											<div class="clearfix"> </div>
										</div>
									</li>
								</ul>
							</div>
					</div>
					<div class="all-comments">
						<div class="all-comments-info">
							<h3 style="margin: 0;">发表评论</h3>
							<div class="box">
							<script type="text/javascript">
								function reply1(){
									var cuID = document.getElementById("userID").innerHTML;
									var acID = 0;
									if(cuID.length == 0){
										alert("请先登录");
									}else{
									var vID =  document.getElementById("testid").innerHTML;
									var context = $("#all-comments").val();
									if(!context){
										alert("请输入评论内容！");
										return ;
									}
									// 获取当前时间
									var date = new Date();
									var year = date.getFullYear();
									var month = date.getMonth()+1;
									var day = date.getDate();
									var hour = date.getHours();
									var minute = date.getMinutes();
									var second = date.getSeconds();
									var time = year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
									$.ajax({
										type:'post',
										dataType:'text',
										url:'saveComment',
										data:{
											'commentUserID':cuID,
											'commentVideoID':vID,
											'context':context,
											'myCommentTime':time,
											'addCommentID':acID
											},
										success:function(data){
											alert(data);
											window.location.reload(); // 点击确定后刷新页面
										},
										error:function(){
										//alert("faliure");
										/*改不过来了，强行success*/
										alert("success");
										window.location.reload();
										/*XMLHttpRequest, textStatus, errorThrown*/
										//	alert(XMLHttpRequest.status);
										//	alert(XMLHttpRequest.readyState);
										}
									})
									}
								}
							</script>
							
							<!-- hidden area for variables -->
							<span id="testid" hidden>${requestScope.video.videoID}</span>
							<!-- hidden area over -->
							
								<form>
									<textarea id="all-comments" placeholder="评论" required="required"></textarea>
									<div>
									<input type="button" value="发表" onclick="reply1()" 
									style="padding: 5px 12px;
										   background: #21DEEF;
										   color: #FFF;
										   font-size: 18px;
										   text-decoration: none;
										   margin-left:68%;
										   margin-top:-1em;
										   border:none;">
								    </div>
									<div class="clearfix"> </div>
								</form>
							</div>
						</div>
                        <p id="comment-title">全部评论</p>
						<div class="media-grids" id="comment-list">
						<!-- 第一条评论 -->					
						<script type="text/javascript">
						function timeStampToString(time){
							var datetime = new Date();
							datetime.setTime(time);
							var year = datetime.getFullYear();
							var month = datetime.getMonth()+1<10?"0"+(datetime.getMonth()+1):datetime.getMonth()+1;
							var date = datetime.getDate()<10?"0"+datetime.getDate():datetime.getDate();
							var hour = datetime.getHours()<10?"0"+datetime.getHours():datetime.getHours();
							var minute = datetime.getMinutes<10?"0"+datetime.getMinutes():datetime.getMinutes();
							var second = datetime.getSeconds()<10?"0"+datetime.getSeconds():datetime.getSeconds();
							return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
						}
						
                                    function checkAllReply(commID) {
                                        var videoID=document.getElementById("testid").innerHTML;
                                    	var firstComID=commID;
                                    	
                                        var html;
                                        var uID=0; // 用户ID
                                        var uName; // 用户名
                                        var uComment=""; // 二级评论内容
                                        var uHeader="";// 用户头像
                                        var secTime="";// 评论时间
                                        
                                        	// 根据视频ID和一级评论id取回二级评论
                                        	$.ajax({
                                        		type:'post',
        										dataType:'json',
        										url:'findSecondaryComment',
        										data:{
        											'commentVideoID':videoID,
        											'commentID':firstComID
        											},
        										success:function(secondComments){
        											// 二级评论条数
        											var len=secondComments.length;
        											if(len==0){
        												alert("本条评论没有回复！");
        												return ;
        											}
        											else{
        												//显示二级评论列表
        	                                            for(var count=0; count<len; count++){
        	                                            	uComment=secondComments[count].context;
        	                                            	uID=secondComments[count].commentUserID;
        	                                            	secTime=timeStampToString(secondComments[count].commentTime);
        	                                            	//根据ID查名字
        	                                            	$.ajax({
        	                                            		type:'post',
        	            										dataType:'json',
        	            										url:'findUserByID',
        	            										data:{'userID':uID},
        	            										success:function(user){
        	            											uName=user.name;
        	            											uHeader=user.header;
        	            											html = '<div class="media" style="padding-left: 4em;">'+'<h5 style="margin-bottom: 2em;">'+uName+'</h5>'+'<div class="media-left"> '+
        	            											'<img src=' + uHeader +' style="width:50px;height:50px;border-radius:50px"/>'+'</div>'+'<div class="media-body"> '+'<p>'+uComment+'</p>'+'<span class="comment-date">'+secTime+'</span>'+'</div>'+'</div>';
        	            											$("."+commID).append(html);
        	            										},
        	            										error:function(){
        	            											alert("get name failure");
        	            										}		
        	                                            	})
        	                                            }
        	                                            var html2='<a href="javascript:;" onclick="cancelAllReply('+commID+')" style="margin-left:75%">收起所有回复</a>';
        	                                            $("."+commID).append(html2);
        	                                            $(this).text("收起所有回复");
        											}
        										},
        										error:function(){
        										alert("secondary faliure");
        										}
                                        	})
                                    }
                                    
                                    function cancelAllReply(cancelID){
                                    	//alert(cancelID);
                                    	$("."+cancelID).text("");
                                    }
                                    </script>
						
						<c:forEach items="${requestScope.comments}" var="comment" varStatus="loop">
						<div class="media">
                                <h5>${requestScope.commentUsers[loop.count-1].name}</h5>
                                <div class="media-left">
                                <!-- 用户头像，还没有显示 -->
                                    <img src="${requestScope.commentUsers[loop.count-1].header } " style="width:50px;height:50px;border-radius:50px"/>
                                </div>
                                <div class="media-body">
                                    <p>${comment.context}</p>
                                    <span class="comment-date">${comment.commentTime}</span>
                                    
									<a href="javascript:;" class="check-reply" onclick="checkAllReply('${comment.commentID}')">查看所有回复</a>
									<a href="javascript:;" class="replyButton1" onclick="comReply('${comment.commentID }')">回复</a>
                                    <!-- 隐藏的评论框-->
									<form class="comment-reply" id="${comment.commentID }" style="display: none;">
                                        <textarea class="reply-text" required="required" style="border: 1px solid #D4D3D3;
												  margin-top: 8px;
												  width: 85%;
												  outline: none;
												  background: none;
												  font-size: 16px;
												  resize: none;"></textarea>
                                        <div>
	                                        <script type="text/javascript">
		                                        function reply(addComID) {
		                                            // 这里的userID要从session取，再把这个参数传入
		                                            var uID=document.getElementById("userID").innerHTML;
		                                            var addVID=document.getElementById("testid").innerHTML;
		                                            var context=$(".comment-reply textarea").val();
		                                            if(!context){
		                                            	alert("请输入评论内容！");
		                                            	return ;
		                                            }
		                                         // 获取当前时间
		                                        	var date = new Date();
		                                        	var year = date.getFullYear();
		                                        	var month = date.getMonth()+1;
		                                        	var day = date.getDate();
		                                        	var hour = date.getHours();
		                                        	var minute = date.getMinutes();
		                                        	var second = date.getSeconds();
		                                        	var time = year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
		                                        	
		                                            $.ajax({
		                                        		type:'post',
		                                        		dataType:'text',
		                                        		url:'saveComment',
		                                        		data:{
		                                        			'commentUserID':uID,
		                                        			'commentVideoID':addVID,
		                                        			'context':context,
		                                        			'myCommentTime':time,
		                                        			'addCommentID':addComID
		                                        			},
		                                        		success:function(data){
		                                        			alert(data);
		                                        			window.location.reload(); // 点击确定后刷新页面
		                                        		},
		                                        		error:function(){
		                                        		alert("faliure");
		                                        		}
		                                        	})
		                                        }
	                                        </script>
											<input type="button" class="replyButton2" value="发表" onclick="reply('${comment.commentID }')">
											<input type="button" class="cancel-reply" value="取消" onclick="cancelReply()">
										</div>
                                    </form>
                                    <div class="${comment.commentID }" ></div>
                                </div>
                                		
						</div>
							<!-- 第一条评论结束 -->
						</c:forEach>
                            <div class="pages"></div>
						</div>
					</div>
				</div>
				<div class="col-md-4 single-right">
					<h3>相关视频</h3>
					<div class="single-grid-right">
					<c:forEach items="${requestScope.videos}" var="video" varStatus="loop" begin="1" end="5">
						<div class="single-right-grids">
							<div class="col-md-4 single-right-grid-left">
								<a href="<%=basePath%>/playVideo?videoID=${video.videoID}"><img src="${video.cover }" alt="" /></a>
							</div>
							<div class="col-md-8 single-right-grid-right">
								<a href="<%=basePath%>/playVideo?videoID=${video.videoID}" class="title"> ${video.title }</a>
								<p class="author"><a href="#" class="author">${requestScope.userName[loop.count-1] }</a></p>
								<p class="views">${video.clickCount } views</p>
							</div>
							<div class="clearfix"> </div>
						</div>
					</c:forEach>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<!-- footer -->
			<div class="footer">
				<div class="footer-grids">
					<div class="footer-top">
						<div class="footer-top-nav">
							<ul>
								<li><a href="about.html">About</a></li>
								<li><a href="press.html">Press</a></li>
								<li><a href="copyright.html">Copyright</a></li>
								<li><a href="creators.html">Creators</a></li>
								<li><a href="#">Advertise</a></li>
								<li><a href="developers.html">Developers</a></li>
							</ul>
						</div>
						<div class="footer-bottom-nav">
							<ul>
								<li><a href="terms.html">Terms</a></li>
								<li><a href="privacy.html">Privacy</a></li>
								<li><a href="#small-dialog4" class="play-icon popup-with-zoom-anim">Send feedback</a></li>
								<li><a href="privacy.html">Policy & Safety </a></li>
								<li><a href="try.html">Try something new!</a></li>
							</ul>
						</div>
					</div>
					<div class="footer-bottom">
						<ul>
							<li class="languages">
								<select class="form-control bfh-countries" data-country="US">
									<option value="">Select Language</option>
									<option>Spanish</option>
									<option>French</option>
									<option>German</option>
									<option>Italian</option>
									<option>Chinese</option>
									<option>Tagalog</option>
									<option>Polish</option>
									<option>Korean</option>
									<option>Vietnamese</option>
									<option>Portuguese</option>
									<option>Japanese</option>
									<option>Greek</option>
									<option>Arabic</option>
									<option>Hindi (urdu)</option>
									<option>Russian</option>
									<option>Yiddish</option>
									<option>Thai (laotian)</option>
									<option>Persian</option>
									<option>French Creole</option>
									<option>Armenian</option>
									<option>Navaho</option>
									<option>Hungarian</option>
									<option>Hebrew</option>
									<option>Dutch</option>
									<option>Mon-khmer (cambodian)</option>
									<option>Gujarathi</option>
									<option>Ukrainian</option>
									<option>Czech</option>
									<option>Pennsylvania Dutch</option>
									<option>Miao (hmong)</option>
									<option>Norwegian</option>
									<option>Slovak</option>
									<option>Swedish</option>
									<option>Serbocroatian</option>
									<option>Kru</option>
									<option>Rumanian</option>
									<option>Lithuanian</option>
									<option>Finnish</option>
									<option>Panjabi</option>
									<option>Formosan</option>
									<option>Croatian</option>
									<option>Turkish</option>
									<option>Ilocano</option>
									<option>Bengali</option>
									<option>Danish</option>
									<option>Syriac</option>
									<option>Samoan</option>
									<option>Malayalam</option>
									<option>Cajun</option>
									<option>Amharic</option>
								</select>
							</li>
							<li class="languages">
								<select class="form-control bfh-countries">
									<option value="">Select Country</option>
									<option value="AFG">Afghanistan</option>
									<option value="ALA">Åland Islands</option>
									<option value="ALB">Albania</option>
									<option value="DZA">Algeria</option>
									<option value="ASM">American Samoa</option>
									<option value="AND">Andorra</option>
									<option value="AGO">Angola</option>
									<option value="AIA">Anguilla</option>
									<option value="ATA">Antarctica</option>
									<option value="ATG">Antigua and Barbuda</option>
									<option value="ARG">Argentina</option>
									<option value="ARM">Armenia</option>
									<option value="ABW">Aruba</option>
									<option value="AUS">Australia</option>
									<option value="AUT">Austria</option>
									<option value="AZE">Azerbaijan</option>
									<option value="BHS">Bahamas</option>
									<option value="BHR">Bahrain</option>
									<option value="BGD">Bangladesh</option>
									<option value="BRB">Barbados</option>
									<option value="BLR">Belarus</option>
									<option value="BEL">Belgium</option>
									<option value="BLZ">Belize</option>
									<option value="BEN">Benin</option>
									<option value="BMU">Bermuda</option>
									<option value="BTN">Bhutan</option>
									<option value="BOL">Bolivia, Plurinational State of</option>
									<option value="BES">Bonaire, Sint Eustatius and Saba</option>
									<option value="BIH">Bosnia and Herzegovina</option>
									<option value="BWA">Botswana</option>
									<option value="BVT">Bouvet Island</option>
									<option value="BRA">Brazil</option>
									<option value="IOT">British Indian Ocean Territory</option>
									<option value="BRN">Brunei Darussalam</option>
									<option value="BGR">Bulgaria</option>
									<option value="BFA">Burkina Faso</option>
									<option value="BDI">Burundi</option>
									<option value="KHM">Cambodia</option>
									<option value="CMR">Cameroon</option>
									<option value="CAN">Canada</option>
									<option value="CPV">Cape Verde</option>
									<option value="CYM">Cayman Islands</option>
									<option value="CAF">Central African Republic</option>
									<option value="TCD">Chad</option>
									<option value="CHL">Chile</option>
									<option value="CHN">China</option>
									<option value="CXR">Christmas Island</option>
									<option value="CCK">Cocos (Keeling) Islands</option>
									<option value="COL">Colombia</option>
									<option value="COM">Comoros</option>
									<option value="COG">Congo</option>
									<option value="COD">Congo, the Democratic Republic of the</option>
									<option value="COK">Cook Islands</option>
									<option value="CRI">Costa Rica</option>
									<option value="CIV">Côte d'Ivoire</option>
									<option value="HRV">Croatia</option>
									<option value="CUB">Cuba</option>
									<option value="CUW">Curaçao</option>
									<option value="CYP">Cyprus</option>
									<option value="CZE">Czech Republic</option>
									<option value="DNK">Denmark</option>
									<option value="DJI">Djibouti</option>
									<option value="DMA">Dominica</option>
									<option value="DOM">Dominican Republic</option>
									<option value="ECU">Ecuador</option>
									<option value="EGY">Egypt</option>
									<option value="SLV">El Salvador</option>
									<option value="GNQ">Equatorial Guinea</option>
									<option value="ERI">Eritrea</option>
									<option value="EST">Estonia</option>
									<option value="ETH">Ethiopia</option>
									<option value="FLK">Falkland Islands (Malvinas)</option>
									<option value="FRO">Faroe Islands</option>
									<option value="FJI">Fiji</option>
									<option value="FIN">Finland</option>
									<option value="FRA">France</option>
									<option value="GUF">French Guiana</option>
									<option value="PYF">French Polynesia</option>
									<option value="ATF">French Southern Territories</option>
									<option value="GAB">Gabon</option>
									<option value="GMB">Gambia</option>
									<option value="GEO">Georgia</option>
									<option value="DEU">Germany</option>
									<option value="GHA">Ghana</option>
									<option value="GIB">Gibraltar</option>
									<option value="GRC">Greece</option>
									<option value="GRL">Greenland</option>
									<option value="GRD">Grenada</option>
									<option value="GLP">Guadeloupe</option>
									<option value="GUM">Guam</option>
									<option value="GTM">Guatemala</option>
									<option value="GGY">Guernsey</option>
									<option value="GIN">Guinea</option>
									<option value="GNB">Guinea-Bissau</option>
									<option value="GUY">Guyana</option>
									<option value="HTI">Haiti</option>
									<option value="HMD">Heard Island and McDonald Islands</option>
									<option value="VAT">Holy See (Vatican City State)</option>
									<option value="HND">Honduras</option>
									<option value="HKG">Hong Kong</option>
									<option value="HUN">Hungary</option>
									<option value="ISL">Iceland</option>
									<option value="IND">India</option>
									<option value="IDN">Indonesia</option>
									<option value="IRN">Iran, Islamic Republic of</option>
									<option value="IRQ">Iraq</option>
									<option value="IRL">Ireland</option>
									<option value="IMN">Isle of Man</option>
									<option value="ISR">Israel</option>
									<option value="ITA">Italy</option>
									<option value="JAM">Jamaica</option>
									<option value="JPN">Japan</option>
									<option value="JEY">Jersey</option>
									<option value="JOR">Jordan</option>
									<option value="KAZ">Kazakhstan</option>
									<option value="KEN">Kenya</option>
									<option value="KIR">Kiribati</option>
									<option value="PRK">Korea, Democratic People's Republic of</option>
									<option value="KOR">Korea, Republic of</option>
									<option value="KWT">Kuwait</option>
									<option value="KGZ">Kyrgyzstan</option>
									<option value="LAO">Lao People's Democratic Republic</option>
									<option value="LVA">Latvia</option>
									<option value="LBN">Lebanon</option>
									<option value="LSO">Lesotho</option>
									<option value="LBR">Liberia</option>
									<option value="LBY">Libya</option>
									<option value="LIE">Liechtenstein</option>
									<option value="LTU">Lithuania</option>
									<option value="LUX">Luxembourg</option>
									<option value="MAC">Macao</option>
									<option value="MKD">Macedonia, the former Yugoslav Republic of</option>
									<option value="MDG">Madagascar</option>
									<option value="MWI">Malawi</option>
									<option value="MYS">Malaysia</option>
									<option value="MDV">Maldives</option>
									<option value="MLI">Mali</option>
									<option value="MLT">Malta</option>
									<option value="MHL">Marshall Islands</option>
									<option value="MTQ">Martinique</option>
									<option value="MRT">Mauritania</option>
									<option value="MUS">Mauritius</option>
									<option value="MYT">Mayotte</option>
									<option value="MEX">Mexico</option>
									<option value="FSM">Micronesia, Federated States of</option>
									<option value="MDA">Moldova, Republic of</option>
									<option value="MCO">Monaco</option>
									<option value="MNG">Mongolia</option>
									<option value="MNE">Montenegro</option>
									<option value="MSR">Montserrat</option>
									<option value="MAR">Morocco</option>
									<option value="MOZ">Mozambique</option>
									<option value="MMR">Myanmar</option>
									<option value="NAM">Namibia</option>
									<option value="NRU">Nauru</option>
									<option value="NPL">Nepal</option>
									<option value="NLD">Netherlands</option>
									<option value="NCL">New Caledonia</option>
									<option value="NZL">New Zealand</option>
									<option value="NIC">Nicaragua</option>
									<option value="NER">Niger</option>
									<option value="NGA">Nigeria</option>
									<option value="NIU">Niue</option>
									<option value="NFK">Norfolk Island</option>
									<option value="MNP">Northern Mariana Islands</option>
									<option value="NOR">Norway</option>
									<option value="OMN">Oman</option>
									<option value="PAK">Pakistan</option>
									<option value="PLW">Palau</option>
									<option value="PSE">Palestinian Territory, Occupied</option>
									<option value="PAN">Panama</option>
									<option value="PNG">Papua New Guinea</option>
									<option value="PRY">Paraguay</option>
									<option value="PER">Peru</option>
									<option value="PHL">Philippines</option>
									<option value="PCN">Pitcairn</option>
									<option value="POL">Poland</option>
									<option value="PRT">Portugal</option>
									<option value="PRI">Puerto Rico</option>
									<option value="QAT">Qatar</option>
									<option value="REU">Réunion</option>
									<option value="ROU">Romania</option>
									<option value="RUS">Russian Federation</option>
									<option value="RWA">Rwanda</option>
									<option value="BLM">Saint Barthélemy</option>
									<option value="SHN">Saint Helena, Ascension and Tristan da Cunha</option>
									<option value="KNA">Saint Kitts and Nevis</option>
									<option value="LCA">Saint Lucia</option>
									<option value="MAF">Saint Martin (French part)</option>
									<option value="SPM">Saint Pierre and Miquelon</option>
									<option value="VCT">Saint Vincent and the Grenadines</option>
									<option value="WSM">Samoa</option>
									<option value="SMR">San Marino</option>
									<option value="STP">Sao Tome and Principe</option>
									<option value="SAU">Saudi Arabia</option>
									<option value="SEN">Senegal</option>
									<option value="SRB">Serbia</option>
									<option value="SYC">Seychelles</option>
									<option value="SLE">Sierra Leone</option>
									<option value="SGP">Singapore</option>
									<option value="SXM">Sint Maarten (Dutch part)</option>
									<option value="SVK">Slovakia</option>
									<option value="SVN">Slovenia</option>
									<option value="SLB">Solomon Islands</option>
									<option value="SOM">Somalia</option>
									<option value="ZAF">South Africa</option>
									<option value="SGS">South Georgia and the South Sandwich Islands</option>
									<option value="SSD">South Sudan</option>
									<option value="ESP">Spain</option>
									<option value="LKA">Sri Lanka</option>
									<option value="SDN">Sudan</option>
									<option value="SUR">Suriname</option>
									<option value="SJM">Svalbard and Jan Mayen</option>
									<option value="SWZ">Swaziland</option>
									<option value="SWE">Sweden</option>
									<option value="CHE">Switzerland</option>
									<option value="SYR">Syrian Arab Republic</option>
									<option value="TWN">Taiwan, Province of China</option>
									<option value="TJK">Tajikistan</option>
									<option value="TZA">Tanzania, United Republic of</option>
									<option value="THA">Thailand</option>
									<option value="TLS">Timor-Leste</option>
									<option value="TGO">Togo</option>
									<option value="TKL">Tokelau</option>
									<option value="TON">Tonga</option>
									<option value="TTO">Trinidad and Tobago</option>
									<option value="TUN">Tunisia</option>
									<option value="TUR">Turkey</option>
									<option value="TKM">Turkmenistan</option>
									<option value="TCA">Turks and Caicos Islands</option>
									<option value="TUV">Tuvalu</option>
									<option value="UGA">Uganda</option>
									<option value="UKR">Ukraine</option>
									<option value="ARE">United Arab Emirates</option>
									<option value="GBR">United Kingdom</option>
									<option value="USA">United States</option>
									<option value="UMI">United States Minor Outlying Islands</option>
									<option value="URY">Uruguay</option>
									<option value="UZB">Uzbekistan</option>
									<option value="VUT">Vanuatu</option>
									<option value="VEN">Venezuela, Bolivarian Republic of</option>
									<option value="VNM">Viet Nam</option>
									<option value="VGB">Virgin Islands, British</option>
									<option value="VIR">Virgin Islands, U.S.</option>
									<option value="WLF">Wallis and Futuna</option>
									<option value="ESH">Western Sahara</option>
									<option value="YEM">Yemen</option>
									<option value="ZMB">Zambia</option>
									<option value="ZWE">Zimbabwe</option>
								</select>
							</li>
							<li class="languages">
								<select class="form-control bfh-countries" data-country="US">
									<option value="">Safety Off</option>
									<option value="">Safety On</option>
								</select>
							</li>
							<li><a href="history.html" class="f-history">History</a></li>
							<li><a href="#small-dialog5" class="play-icon popup-with-zoom-anim f-history f-help">Help</a></li>
						</ul>
					</div>
				</div>
			</div>
			<!-- //footer -->
		</div>
		<div class="clearfix"> </div>
	<div class="drop-menu">
		<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
		  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
		  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
		  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
		</ul>
	</div>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
    var flag = false;
    var flag2 = false;
    function likeVideo() {

        flag = !flag;
        var videoID = document.getElementById("testid").innerHTML;
        var like = document.getElementById("like");
        var likeCount = parseInt(like.innerHTML);

        if(flag == true){
            like.setAttribute("class","unlike-icon");
            like.innerHTML = likeCount + 1;
        }else{
            like.setAttribute("class","icon");
            like.innerHTML = likeCount - 1;
        }
        
        var recommentCount = like.innerHTML;
        
        $.ajax({
			type:'post',
			url:'likeVideo',
			dataType:'text',
			data:{'videoID':videoID,'recommentCount':recommentCount},
			success:function(data){
				alert('点赞成功');
			}
		})

    }
    
    function addFavourite(){
    	
    	flag2 = !flag2;
        var videoName = document.getElementById("videoName").innerHTML;
        var favourite = document.getElementById("add_favourite");
        var likeCount = favourite.innerHTML;

        if(flag2 == true){
        	
        	favourite.setAttribute("class","unfavourite-icon");
        }else{
            
        	favourite.setAttribute("class","favourite-icon");
        }
        var timestamp =Date.parse(new Date());
        
        var userID = document.getElementById("userID").innerHTML;
        
        if(userID.length == 0){
        	alert("请先登录");
        }else{
        	
        	$.ajax({
    			type:'post',
    			url:'addFavourite',
    			dataType:'text',
    			data:{'userID':userID, 'favouriteVideoName':videoName},
    			success:function(data){
    				if(data == 'repeat'){
    					alert("该视频已在您的收藏夹内哦~");
    				}else if(data == "success"){
    					alert("添加成功");
    				}
    				
    			}
    		});
        	
        }
    	
    }
    
    </script>
    
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
  </body>
</html>